<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
	<head>
		<title>Quantidade Municipios</title>
		<script type="text/javascript">
			function consultarEstado() {
				if (document.getElementById("estado").value == "") {
					alert("Favor selecionar o estado.");
					return;
				}
				
				document.forms["principal"].submit();
			}
			
			function voltar() {
				document.getElementById("acao").value = "";
				document.forms["principal"].submit();
			}
				
			function verificaResultado() {
				<% String quantidade=(String)request.getAttribute("quantidade");%>
				<% String estado=(String)request.getAttribute("estado");%>
				
				if (<%= quantidade%> != null) {
					var body=document.getElementsByTagName('div')[0];
					var tbl=document.createElement('table');
					tbl.style.width='35%';
					tbl.setAttribute('border','1');
					var tbdy=document.createElement('tbody');
					var tr=document.createElement('tr');
					var th=document.createElement('th');
					
					th.appendChild(document.createTextNode('Estado'));
					tr.appendChild(th);
					
					var th=document.createElement('th');
					th.appendChild(document.createTextNode('Quantidade de Cidade'));
					
					tr.appendChild(th);
					tbdy.appendChild(tr);
					
					var tr=document.createElement('tr');
					var td=document.createElement('td');
					
					td.appendChild(document.createTextNode( '<%= estado%>'));
					td.setAttribute('align','center');
					tr.appendChild(td);
					
					var td=document.createElement('td');
					td.appendChild(document.createTextNode("" + <%= quantidade%>));
					td.setAttribute('align','center');
					
					tr.appendChild(td);
					tbdy.appendChild(tr);
					
					tbl.appendChild(tbdy);
					body.appendChild(tbl);
				}
			}
			
		</script>
	</head>
	<body onload="verificaResultado();">
		Pesquisa de quantidade de cidades por estado. <br/>
		Escolha um estado abaixo e clique em "OK"<br/>
		<form action="servlet" name="principal" method="post">
			<input type="hidden" id="acao" name="acao" value="2" />
			<input type="hidden" name="subAcao" value="0" />
			
			<select name="estado" id="estado">
				<option value="">Selecione o Estado</option>
				<option value="ac">Acre</option>
				<option value="al">Alagoas</option>
				<option value="ap">Amapá</option>
				<option value="am">Amazonas</option>
				<option value="ba">Bahia</option>
				<option value="ce">Ceará</option>
				<option value="df">Distrito Federal</option>
				<option value="es">Espirito Santo</option>
				<option value="go">Goiás</option>
				<option value="ma">Maranhão</option>
				<option value="ms">Mato Grosso do Sul</option>
				<option value="mt">Mato Grosso</option>
				<option value="mg">Minas Gerais</option>
				<option value="pa">Pará</option>
				<option value="pb">Paraíba</option>
				<option value="pr">Paraná</option>
				<option value="pe">Pernambuco</option>
				<option value="pi">Piauí</option>
				<option value="rj">Rio de Janeiro</option>
				<option value="rn">Rio Grande do Norte</option>
				<option value="rs">Rio Grande do Sul</option>
				<option value="ro">Rondônia</option>
				<option value="rr">Roraima</option>
				<option value="sc">Santa Catarina</option>
				<option value="sp">São Paulo</option>
				<option value="se">Sergipe</option>
				<option value="to">Tocantins</option>
			</select>
			<br/><br/>
			<div id="tabela" ></div>
			<hr width="40%" align="left"/>
			<input type="button" value="Ok" onclick="consultarEstado();">
			<input type="button" value="Voltar" onclick="voltar();">
		</form>
	</body>
</html>